<template>
<div class="table-pages">
  <div class="table-f-inner">
      <div>
          共<span class="number-style">{{tableForm.pages}}</span>页合计
          <span class="number-style">{{tableForm.total}}</span>条记录,
          每页<el-select v-model="value" @change="changeSize($event)" class="pagination-c" placeholder="请选择">
                  <el-option
                  v-for="item in [15,20,30,40,50]"
                  :key="item"
                  :label="item"
                  :value="item">
                  </el-option>
              </el-select> 条

      </div>
       <div class="table-pagination">
          <el-button type="text" @click="toFirst" class="to-but to-first" :disabled="tableForm.pages==1">
              首页
          </el-button>
          <el-pagination prev-text="首页" next-text="尾页" class="table-page" 
          background layout="pager"
          :page-size="tableForm.pageSize"
          :current-page.sync="tableForm.pageNum"
          :total="tableForm.total"
           @current-change="setPage"></el-pagination>
          <el-button type="text" @click="toEnd" class="to-but to-end" :disabled="tableForm.pages==1">
              尾页
          </el-button>
      </div>
  </div>
</div>
    
</template>
<script>
export default {
    name: 'Page',
    props:{
        tableName: '',
        pageSize: Number,
        tableForm:Object
    },
    data() {
        return {
            value: 15,
        };
    },
    created() {
      this.value = this.pageSize || 15
    },
    methods: {
        toFirst(){
            this.$emit('toFirst')
        },
        toEnd(){
            this.$emit('toEnd')
        },
        changeSize(num){
            this.$emit('changeSize', num, this.tableName)
        },
        setPage(a) {
            this.$emit('setPage', a)
        },
    },
    
}
</script>
<style lang="less">
.table-pages{
    position: absolute;
    bottom:0;
    width: calc(100% - 40px);
    z-index: 99;
    overflow: hidden;
    .table-f-inner{
        height: 50px;
        padding-left: 20px;
        padding-right: 10px;
        background-color: #ffffff;
        box-shadow: 0px 2px 8px 0px 
            rgba(215, 215, 215, 0.6);
        border-radius: 6px 6px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .number-style{
        font-size: 12px;
        color: #ffffff;
        background-color: #008cd6;
        border-radius: 3px;
        display: inline-block;
        padding:0 5px;
        margin:0 6px;
    }
    .table-pagination{
      display: flex;
      align-items: center;
      .to-but{
        cursor: pointer;
        background-color: #ffffff;
        height:30px;
        line-height: 30px;
        width:42px;
        text-align: center;
        color: #008cd6;
        padding: 0 !important;
      }
      .to-first{
        border-radius: 4px 0px 0px 4px;
        border: solid 1px #cccccc;
        border-right:0;
        padding-top: 0;
        min-width:42px;
      }
      .to-end{
        border-radius: 0px 4px 4px 0px;
        border: solid 1px #cccccc;
        border-left:0;
        padding-top: 0;
        min-width:42px;
      }
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active{
        background-color: #008cd6 !important;
        color:#fff
    }
    .el-pagination.is-background .el-pager li{
        margin: 0;
        border: 0;
        border-right:1px #ccc solid;
        border-radius: 0;
        font-weight: normal;
    }
    .el-pagination{
        padding: 0;
        border:1px #ccc solid;
        border-left:0;
        border-right:0
    }
    .el-pagination.is-background{
        .btn-prev, .btn-next{
            margin:0;
            border: 0;
            border-right:1px #ccc solid;
            border-radius: 0;
            color: #008cd6;
         }
        .btn-next{
            border:0;
        }
    }
    .el-pagination.is-background .btn-next:disabled{

    }
     .pagination-c {
        color: #fff;
        margin: 0 5px;
        .el-input__icon {
            width: 10px;
            line-height: 29px;
        }
        .el-input__inner {
            padding: 0;
            padding-left: 5px;
            height: 28px;
            width: 50px;
            line-height: 20px;
        }
        }
    
}

</style>